/**
 * 像素转换为毫米切换
 */
import { FC, useState, useEffect } from "react";
import { observer, inject } from "mobx-react";
import { Select } from "antd";
import { ITStore } from "../../store";
import { ITDictValue } from "../../store/interfaces";

const { Option } = Select;

type TProp = {
  store: ITStore;
};
const MmPixBox: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    globalStore: { changeMmPixRate, mmPixRate },
    dictionaryStore: { getDictValuesByKey },
  } = store;

  const [optionList, setOptionList] = useState<ITDictValue[]>([]);

  useEffect(() => {
    setOptionList(getDictValuesByKey("mmToPix"));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const mmChange = (val: any) => {
    changeMmPixRate(val - 0);
    // window.location.reload();
  };
  return (
    <Select value={mmPixRate} style={{ width: 100 }} onChange={mmChange}>
      {optionList.map(({ label, value }, index) => (
        <Option key={index} value={value}>
          {label}
        </Option>
      ))}
    </Select>
  );
};

export default inject("store")(observer(MmPixBox));
